<!-- @author zhanggy -->
<template>
    <el-select v-model="name" :multiple="multiple" clearable :placeholder="placeholder" @change="changeSelect" size="small">
      <el-option 
        v-for="item in userList"
        :key="item.id"
        :label="item.nickname"
        :value="item.id" 
        @click.native="selectedUser(item)">
      </el-option>
    </el-select>
</template>

<script>
import { listUserForSelect } from "@/api/system/user"
export default {
  name: 'UserSelect',
  props : {
    roleId : {
      type : String,
      default : undefined
    },
    deptId : {
      type : String,
      default : undefined
    },
    type : {
      type : String,
      default : undefined
    },
    placeholder : {
      type : String,
      default : "请选择人员"
    },
    multiple : {
      type : Boolean,
      default : false
    },
    selectChange : {
      type : Function,
      default : undefined
    }
  },
  data() {
    return {
      name : "",
      userList: null,
      queryParams : {
        pageNo: 1,
        pageSize: 10,
        roleId: this.roleId,
        deptId : this.deptId
      }
    }
  },
  methods: {
    filterUsers() {
      if (this.name) {
        this.userList = this.userList.filter(item => item.includes(this.name))
      }
    },
    changeSelect(val){
      this.$emit('update:pModel', val);
      if(this.selectChange){
        this.selectChange(val);
      }
    },
    selectedUser(data) {
      this.$emit('selectItem', data);
      document.body.click()
    },
    reset() {
      this.name = ''
      this.userList = userss
    },
    getUserList (){
      this.loading = true;
      listUserForSelect(this.queryParams).then(response => {
          this.userList = response.data;
          this.loading = false;
        }
      );
    }
  },
  created() {
    this.getUserList();
  }
}
</script>
